<template>
    <f7-popup :opened="myPop" @popup:open="popOpen()">
        <f7-page bg-color="white">
            <f7-navbar title="选择地址"></f7-navbar>

            <f7-block>
                <div class="pro">
                    <h4>省份</h4>
                    <template v-for="item in province">
                        <div class="item" :class="{'itemActive':item.checked}" v-if="key!='checked'" v-for="(it,key,index) in item" :key="key" @click="provinceClick(item,it)"> {{key}}</div>
                    </template>
                </div>
                <div style="clear: both"></div>
                <div class="city" v-if="city.length">
                    <h4>市</h4>
                    <div class="item" :class="{'itemActive':item.checked}" v-for="(item,index) in city" :key="item.name" @click="cityClick(item,index)">
                        {{item.name}}
                    </div>
                </div>
                <div style="clear: both"></div>
                <div class="district" v-if="district.length && cityLessThan2">
                    <h4>区/县</h4>
                    <div class="item" :class="{'itemActive':item.checked}" v-for="(item,index) in district" :key="item.name" @click="districtClick(item,index)">
                        {{item.name}}
                    </div>
                </div>
            </f7-block>

            <f7-toolbar>
                <f7-block class="addSelecToolbar">
                    <f7-link @click="addSubmit()">确定</f7-link>
                </f7-block>
                <f7-block class="addSelecToolbar">
                    <f7-link @click="closePop()">关闭</f7-link>
                </f7-block>
            </f7-toolbar>
        </f7-page>
    </f7-popup>
</template>

<script>
import common from '../utils/common.js'
export default {
  name: 'addSelect',
  data () {
    return {
      myPop: false,
      cityLessThan2: true,
      province: [],
      city: [],
      district: []
    }
  },
  props:['type'],
  methods: {
    openPop () {
      this.myPop = true
    },
    closePop () {
      this.myPop = false
    },
    popOpen () {
      this.province = []
      this.city = []
      this.district = []
      this.getProvince()
    },
    addSubmit () {
      let province = []
      let city = []
      let district = []
      let sourceData={
          province:[],
          city:[],
          district:[]
      }
      this.province.forEach(function (item) {
        if (item.checked) {
          for (let k in item) {
            if (k !== 'checked') {
              province.push(k)
              sourceData.province.push(item)
            }
          }
        }
      })
      this.city.forEach(function (item) {
        if (item.checked) {
          city.push(item.name)
          sourceData.city.push(item)
        }
      })
      this.district.forEach(function (item) {
        if (item.checked) {
          district.push(item.name)
          sourceData.district.push(item)
        }
      })
      this.$emit('addsDone', {
        province: province,
        city: city,
        district: district,
        sourceData:sourceData
      })
      this.myPop = false
    },
    provinceClick (item1, item2) {
      // 市添加checked标志
      item2.forEach(function (city) {
        city.checked = false
      })
      this.city = item2

      this.province.forEach(function (province) {
        province.checked = false
      })
      item1.checked = true

      // 若改变省份了，那么县就清空历史数据
      this.district = []
    },
    cityLessThan2F(){
        // 注意的是，如果超过2个市，那么县区就不显示了
        let cityCheckd = []
        this.city.forEach(function (city) {
            if (city.checked) {
                cityCheckd.push(city)
            }
        })
        this.cityLessThan2=cityCheckd.length<2;
        return cityCheckd;
    },
    cityClick (item, index) {
      //若是单选
      if(this.type=='radio' ){
        common.addAttrSwitch(this.city,'checked')
        // 点中的那个市区状态处理
        item.checked = true
        this.$set(this.city, index, item)

        // 获取县
        let cityCheckd=this.cityLessThan2F();//获取被选中的市
        this.getDistrict({ city: cityCheckd[0].name })

      }else{
          // 点中的那个市区状态处理
          item.checked = !item.checked
          this.$set(this.city, index, item)
          let cityCheckd=this.cityLessThan2F();//获取被选中的市
          if(this.cityLessThan2){
              // 获取县
              this.getDistrict({ city: cityCheckd[0].name })
          }
      }
    },
    districtClick (item, index) {
        if(this.type=='radio' ){
            common.addAttrSwitch(this.district,'checked')
            item.checked = true
        }else{
            item.checked = !item.checked
        }
        this.$set(this.district, index, item)

    },
    async getProvince () {
      let getProvinceRep = (await this.AreaService.getProvince()).data
      // 省份添加checked标志
      getProvinceRep.data.forEach(function (province) {
        province.checked = false
      })
      this.province = getProvinceRep.data
    },
    async getDistrict (param) {
      let getDistrictRep = (await this.AreaService.getDistrict(param)).data
      getDistrictRep.data.forEach(function (district) {
        district.checked = false
      })
      this.district = getDistrictRep.data
    }
  }
}
</script>

<style scoped>
.addSelecToolbar {
  text-align: center;
}
h4 {
  margin: 0;
}
.item {
  text-align: center;
  float: left;
  border: 1px solid #f5f5f5;
  border-radius: 3px;
  margin: 10px 5px 7px 0;
  padding: 3px;
  color: #333;
  min-width: 20%;
  max-width: 20%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
}
.itemActive {
  border-color: red;
}
.city,
.district {
  margin-top: 30px;
}
</style>
